import React, { Component, } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, AsyncStorage, FlatList, } from 'react-native';

const styles = StyleSheet.create({
  container:
  {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingBottom: 25,
  },

  cityLayout:
  {
    flexDirection: "column",
    flex: 1,
  },

  cityTextBox:
  {
    flexDirection: "row",
    color: "#212121",
    justifyContent: "space-between",
    backgroundColor: '#ffffff',
    marginRight: 20,
    marginLeft: 20,
    fontSize: 15,
  },

  cityTextBox2:
  {
    color: "#212121",
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: '#ffffff',
    marginRight: 20,
    marginLeft: 20,
    marginTop: 10,
    fontSize:15
  },

  line:
  {
    marginBottom: 12,
    marginTop: 12,
    marginRight: 20,
    marginLeft: 20,
    height: 0.6,
    backgroundColor:"#E5E5E5",
  },
  chinaText:
  {
    marginBottom: 30,
  },
})
export default class City extends Component {
  constructor(props) {
    super(props);
     
    this.state = {
      pageMode: props?.navigation?.state?.params?.pageMode || '0',
      listStatus: -1,
      cityInfo: [ {
        code: "",
        name: "",
      }, ],
      countryInfo: [ {
        countryCode: "",
        countryName: "",
        id: 0,
        sort: 0,
        status: 0,
      }, ],
    };
  }

  async getInfo() {
    const listStatus = await AsyncStorage.getItem("listStatus");
    const cityInfo =  JSON.parse(await AsyncStorage.getItem('cityInfo'))
    const countryInfo =  JSON.parse(await AsyncStorage.getItem('countryInfo'))
    this.setState({listStatus, countryInfo, cityInfo})
  }

  static navigationOptions = ({ navigation, }) => ({
    headerTitle: '地区列表'
  });

  componentDidMount() {
    this.getInfo();
  }

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.pageMode == '1' ? null:
          <View>
          {this.renderChina()}
        </View>
        }
     <FlatList
        data={this.isCountryList() ? this.state.countryInfo: this.state.cityInfo}
        renderItem={({item}) =>this.renderItem(item)}
      />
      </View>
    );
  }

  renderItem(element) {
    return (
      <TouchableOpacity
        onPress={() => {
        this.selectCity(element);
      }}
      >
        <View style={styles.cityLayout}>
          <Text style={styles.cityTextBox}>{this.isCountryList() ? element.countryName : element.name}</Text>
          <View style={styles.line} />
        </View>
      </TouchableOpacity>
    )
  }

  isCountryList() {
    return this.state.listStatus === '0';
  }

  renderChina() {
    let cityCell;
    if (this.isCountryList()) {
      cityCell =
        (<TouchableOpacity
          onPress={() => {
            this.selectCity({});
          }}
        >
          <View>
            <Text style={styles.cityTextBox}>中国</Text>
            <View style={styles.line} />
            <View style={styles.chinaText} />
          </View>
        </TouchableOpacity>);
    } else {
      cityCell = <View />;
    }
    return cityCell;
  }

  selectCity(element) {
    console.log("TAGGG', '===city=selectCity==element====" + JSON.stringify(element));
    //pageMode 为1 代表只想选择国家
    if (this.state.pageMode != '1' && this.isCountryList()) {
      this.setState({listStatus: '1'})
    } else {
      const callback = this.props.navigation.state.params.callback;
      if(callback) {
        callback(element)
      }
      this.props.navigation.goBack()
    }
  }
}
